<template>
  <div class=" white-module">
    <div class="title">
      <div class="left">
        通知详情
      </div>
    </div>

    <div class="global-table">
      <div style="text-align: center;font-weight: bold;font-size:16px; line-height: 45px;">
        {{dataForm.title}}
      </div>
      <div style="border-bottom: 1px solid #ddd; color: #999;text-align: center;font-weight: bold;font-size:16px; line-height: 45px;">
        {{dataForm.createDate}}
      </div>

      <div v-html="dataForm.content" style="padding-top: 30px;overflow: hidden; min-height: 500px;padding: 0 20px;"></div>
    </div>


  </div>
  <el-dialog
      v-model="dialogVisible" :show-close="false"
      width="400px"
  >
    <div class="confirm-dialog">
      <div class="image"><img src="@/assets/common/notice.png"/></div>
      <div class="text" v-html="dataForm.content"></div>
      <div class="btns">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script lang="ts" >
import {ref,toRefs, reactive, defineComponent} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache} from "@/utils/cache";

export default defineComponent({
  setup() {
    const state = reactive({
      getDataListURL: "/front/fast/notice/notice/page?pageSize=10&type=1",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        id: '',
        title: "",
        content: "",
        createDate: ""
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {
      isCollapse:1,
      dialogVisible:false,
      isNavCollapse:false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
      userInfo: ""
    };
  },

  mounted() {
    this.dataForm.id=''+this.$route.query.id ;
    this.queryNotice();
  },

  methods: {
    queryNotice() {
      baseService.get("/front/spmatch/matchItem/" + this.dataForm.id).then((e: any) => {
        if (e.code == '0') {
          let data = e.data;
          this.dataForm.title = data.noticeTitle;
          this.dataForm.content = data.noticeContent;
          this.dataForm.createDate = data.noticeTime;
        }
      });
    },

  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.white-module {
  padding-top: 20px;
}

.troops {
  position: relative;
  margin: 0px 0px 10px 20px;

  img {
    width: 579px;
  }

  .c {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 532px;
    line-height: 54px;
    border-radius: 6px;

    span {
      font-size: 16px;
      font-weight: $font-weight-bold;
      margin-left: 24px;
      margin-right: 11px
    }

  ;

    span:nth-child(3) {
      margin-left: 40px;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  margin-top: 17px;

  .left {
    font-size: 16px;
    font-weight: $font-weight-bold;
  }

;

  .right {
    color: #959CA9;

    .el-button {
      margin-left: 16px;
    }

    span {
      color: #FF8F3C;
    }
  }
}

.global-table {
  margin-top: 15px;
  padding: 0px 20px;
}

.popper-menu {
  border: 0px !important;

  .el-menu {
    padding: 0px !important;
    background-color: #008fd1 !important;

    .el-menu-item-group__title {
      padding: 0px;
    }

    .el-menu-item:hover {
      background-color: #ffffff !important;
      color: #00a0e9;
    }

    .el-menu-item.is-active {
      background-color: #ffffff !important;
    }
  }
}</style>
